const path = require('path');
const webpack = require('webpack');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const config = require('./config.json');
const eslintFormatter = require("eslint-friendly-formatter");
const devMode = process.argv.indexOf('-p') === -1;

module.exports = {
  
  module: {
    rules: [
      // js 规则
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader'
        }
      },
      // css 规则
      {
        test: /\.css$/,
        use: [
          devMode ? "vue-style-loader" : MiniCssExtractPlugin.loader,
          'css-loader',
          'postcss-loader'
        ],
      },
      // .vue 规则
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      // 图片资源规则
      {
        test: /\.(png|jpg|jpeg|gif|ogg)$/i,
        use: [{
            loader: 'url-loader',
            options: {
              // 设置大小限制，超出后使用file-uploader
              limit: 20000,
              name(file) {
                if (devMode) return '[path][name].[ext]';
                return '[hash].[ext]';
              },
              outputPath: 'style/images/'
            }
          },
          // {
          //   loader: 'file-loader',
          //   options: {
          //     // 设置大小限制，超出后使用file-uploader
          //     // limit: 20000,
          //     name(file) {
          //       if (devMode) return '[path][name].[ext]';
          //       return '[hash].[ext]';
          //     },
          //     outputPath: 'style/images/'
          //   }
          // }
        ]

      },
      // 字体资源规则
      {
        test: /\.(eot|ttf|woff|woff2|svg|svgz)$/i,
        loader: 'file-loader',
        options: {
          name(file) {
            if (devMode) return '[path][name].[ext]';
            return '[hash].[ext]';
          },
          outputPath: 'style/fonts/'
        }
      },
      // {
      //   test: /\.(js|vue)$/,
      //   loader: "eslint-loader",
      //   enforce: "pre",
      //   //指定检查的目录
      //   include: [path.resolve(__dirname, 'src')],
      //   //eslint检查报告的格式规范
      //   options: {
      //     formatter: eslintFormatter
      //   }
      // }
    ]
  },
  node: {
    fs: "empty"
  },
  resolve: {
    // 后缀自动补全
    extensions: ['.vue', '.js'],
    alias: {
      // vue官网有说明
      'vue$': 'vue/dist/vue.esm.js',
      'vue': 'vue/dist/vue.esm.js',
      // 定义@符号来指代src目录
      '@': path.resolve(__dirname, 'src'),
      // 'test$': path.resolve(__dirname, 'src/scripts/test.js')
      // 'login$': path.resolve(__dirname, 'src/scripts/login.js'),
    }
  },
  
  // 插件列表
  plugins: [
    new VueLoaderPlugin(),
    
  ]
};